<template>
    <div class="page-user-list">
        <high-table
            :columns="cols"
            :data-list="dataList"
            :pagination="pagination"
            @page-change="onPageChange"
            @submit-search="submitSearch"
        >
            <template #cell="scope">
                <div v-if="scope.col.prop === 'option'">
                    <el-button>{{ scope.row.name }}</el-button>
                </div>
            </template>
        </high-table>
    </div>
</template>

<script lang="ts" setup>
interface TestItem {
    name: string;
    age: number;
}

import HighTable from '@/components/HighTable/index.vue';

import { ref } from 'vue';

const dataList = ref<TestItem[]>([
    { name: '张三', age: 30 },
    {
        name: '李四',
        age: 18,
    },
]);
const cols = ref<HighTableColumn[]>([
    {
        prop: 'name',
        formType: 'input',
        label: '姓名',
        width: 180,
    },
    {
        prop: 'age',
        formType: 'select',
        label: '年龄',
        width: 180,
        options: [
            { value: '1', label: '1a' },
            { value: '2', label: '2a' },
        ],
    },
    {
        prop: 'option',
        label: '操作',
        hideInSearch: true,
    },
]);
const pagination = {
    total: 600,
    size: 10,
};

const onPageChange = (nextPageNo: number) => {
    console.log('next page no', nextPageNo);
};

const submitSearch = (values: any) => {
    console.log('submit-search', values);
};
</script>

<style lang="scss">
.page-user-list {
}
</style>
